<template>
	<view class="wSelect" :style="{ width: width, height: height, backgroundColor: bgColor, border: border }">
		<view @click="openSelect" class="pickerSelect">
			<view :style="{ height: height }" v-if="multiple" class="multipleChoice">
				<view
					class="defaultValue"
					style="color: #999999;"
					v-if="!inputData && multiSelectList.length < 1"
				>
					{{ defaultValue }}
				</view>
				<view class="option" v-if="multiSelectList.length > 0">
					<view class="">{{ multiSelectList[0][valueName] }}</view>
					<image
						class="img"
						@click.stop="multiDelete"
						src=""
						mode=""
					></image>
				</view>
				<view v-if="multiSelectList.length > 1" class="more">{{ multiLength }}</view>
				<input
					:disabled="!filterable"
					:style="{ height: height, paddingRight: '30rpx', fontSize: fontSize, color: fontColor }"
					@input="inputChange"
					type="text"
					v-model="inputData"
				/>
			</view>
			<input
				v-else
				:disabled="!filterable"
				:style="{ height: height, paddingRight: '30rpx', fontSize: fontSize, color: fontColor ,textAlign:textagin, marginRight: marginright}"
				@input="inputChange"
				:placeholder="defaultValue"
				type="text"
				v-model="inputData"
			/>
			<view v-if="!inputData || !showClose" :class="show ? 'arrow-up' : 'arrow'"></view>
			<view class="showClose" v-if="showClose && inputData">
				<image
					@click.stop="refreshValue"
					src=""
					mode=""
				></image>
			</view>
			<view v-show="show" class="tips animation-top" :style="{ top: tipsPositon }"></view>
		</view>
		<!-- 单选时的下拉框 -->
		<view v-if="!multiple" :style="{ width: width,bottom:bottom}" v-show="show" class="content  animation-top">
			<scroll-view style="height: 300rpx;" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="refresh">
			<view
				class="item"
				:class="value == item[valueName] ? 'choose' : ''"
				v-for="item in listData"
				:key="item[keyName]"
				@click="clickSelect(item)"
			>
				{{ item[valueName] }}
			</view>
			</scroll-view>
			<view class="item" v-if="listData.length < 1">无匹配项</view>
		</view>
		<!-- 多选的下拉框 -->
		<view v-else :style="{ width: width ,bottom:bottom}" v-show="show" class="content  animation-top">
			<scroll-view style="height: 300rpx;" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="refresh">
			<view
				class="item"
				:class="multiSelectList.find(res => res[valueName] == item[valueName]) ? 'choose' : ''"
				v-for="item in listData"
				:key="item[keyName]"
				@click="multiSelect(item)"
			>
				{{ item[valueName] }}
			</view>
		</scroll-view>
			<view class="item" v-if="listData.length < 1">无匹配项</view>
		</view>
	</view>
</template>
<script>

export default {
	name: 'wSelect',
	props: {
		//是否多选
		multiple: {
			type: Boolean,
			default: false
		},
		//是否可搜索
		filterable: {
			type: Boolean,
			default: false
		},
		//是否显示关闭按钮
		showClose: {
			type: Boolean,
			default: true
		},
		width: {
			type: String,
			default: '300rpx'
		},
		bgColor: {
			type: String,
			default: '#fff'
		},
		height: {
			type: String,
			default: '60rpx'
		},
		//默认显示的内容
		defaultValue: {
			type: String,
			default: ''
		},
		//绑定的唯一id
		keyName: {
			type: String,
			default: 'id'
		},
		//显示的内容
		valueName: {
			type: String,
			default: 'value'
		},
		list: {
			type: Array,
			default: () => []
		},
		//双向绑定的值
		value: {
			default: ''
		},
    selectHeight:{
		  type:String,
      default:'300rpx'
    },
    showName:{
		  type:Boolean
    },
	text:{
		type:String,
		default:''
	},
    border:{
		  type: String,
      default: '2rpx solid #dcdfe6'
    },
    bottom:{
		  type: String,
      default: ''
    },
    fontSize:{
		  type: String,
      default: '28rpx'
    },
    fontColor: {
		  type:String,
      default: '#333333'
    },
	marginright:{
		type: String,
      	default: ''
	},
	textagin:{
		type: String,
      	default: ''
	}
	},
	data() {
		return {
			show: false,
			multiSelectList: [],
			inputData: '',
			listData: this.list
		}
	},
	computed: {
		multiLength() {
			const length = this.multiSelectList.length - 1
			return '+' + length
		},
		tipsPositon() {
			let num = this.height.replace('rpx', '')
			let numAdd = Number(num) + Number(10)
			return numAdd + 'rpx'
		}
	},
  watch:{
	  showName(n,o){
	    if(n){
        this.show=false
        this.multiSelectList= []
        this.inputData= ''
        }
    },
	text(n,o){
        this.inputData= n
		console.log(this.inputData)
	},
	list:{
		deep:true,
		handler(n,o){
			this.listData=n
		}
	},
  },
	methods: {
		openSelect() {
			this.show = !this.show
			this.listData = this.list
		},
		remove(){
			this.multiSelectList = []
			this.show = false
		},
		clickSelect(item) {
			this.$emit('input', item[this.valueName])
			this.inputData = item[this.valueName]
			this.$emit('change', item)
			this.show = false
		},
		inputChange(e) {
			this.show=true
			console.log(e.detail.value,this.value)
			let value = e.detail.value
			if (this.value) {
				this.$emit('input', '')
			}
			if (value) {
				this.listData = this.listData.filter(item => item[this.valueName].includes(value))
			} else {
				this.listData = this.list
			}
		},
		multiSelect(item) {
			let index = this.multiSelectList.findIndex(res => res[this.valueName] == item[this.valueName])
			if (index > -1) {
				this.multiSelectList.splice(index, 1)
			} else {
				this.multiSelectList.push(item)
			}
			this.inputData = ''
			this.listData = this.list
			this.$emit('input', this.multiSelectList)
			this.$emit('change', item)
		},
		refreshValue() {
			console.log('hhhhhhhhhhhhh');
			this.$emit('input', '')
			this.inputData = ''
			this.listData = this.list
			this.$emit('change', '')
			this.show = false
		},
		multiDelete() {
			this.multiSelectList.splice(0, 1)
			this.$emit('input', this.multiSelectList)
			if (this.multiSelectList.length < 1) {
				this.show = false
			}
		},
		//更新单选值
		updateInputData(e){
			this.inputData= e
		},
		//更新多选值
		updateInputMultiSelectList(e){
			this.multiSelectList = e
		},
		refresh(){
			console.log('刷新')
			this.$emit('refresh')
		}
	}
}
</script>
<style lang="scss" scoped>
.wSelect {
	background-color: #fff;
	border-radius: 6rpx;
	position: relative;
	.pickerSelect {
		border-radius: 6rpx;
		position: relative;
		transition: all 0.6s;
		display: flex;
		align-items: center;
		input {
			flex: 1;
		}
		.tips {
			position: absolute;
			margin-left: 30rpx;
			width: 0;
			height: 0;
			border-bottom: 12rpx solid #fff;
			border-left: 12rpx solid transparent;
			border-right: 12rpx solid transparent;
			z-index: 1000;
		}
		.showClose {
			width: 30rpx;
			height: 30rpx;
			// position: absolute;
			position: relative;
			right: 14rpx;
			// top: 50%;
			bottom: -15rpx;
			transform: translateY(-50%);

			image {
				width: 100%;
				height: 100%;
			}
		}

		.arrow {
			transition: all 0.6s;
			position: absolute;
			top: 32%;
			right: 20rpx;
			border-left: 2rpx solid #999999;
			border-bottom: 2rpx solid #999999;
			height: 16rpx;
			width: 16rpx;
			transform: translate(2rpx, -2rpx) rotate(-45deg);
			-webkit-transform: translate(2rpx, -2rpx) rotate(-45deg);
			border-right: 2rpx solid transparent;
			border-top: 2rpx solid transparent;
			display: inline-block;
		}

		.arrow-up {
			transition: all 0.6s;
			position: absolute;
			top: 50%;
			right: 20rpx;
			border-left: 2rpx solid #999999;
			border-bottom: 2rpx solid #999999;
			height: 16rpx;
			width: 16rpx;
			transform: translate(2rpx, -2rpx) rotate(135deg);
			-webkit-transform: translate(2rpx, -2rpx) rotate(135deg);
			border-right: 2rpx solid transparent;
			border-top: 2rpx solid transparent;
			display: inline-block;
		}
		.multipleChoice {
			display: flex;
			align-items: center;
			input {
				flex: 1;
			}
			.defaultValue {
				position: absolute;
				left: 20rpx;
			}
			.option {
				display: flex;
				align-items: center;
				background-color: #f4f4f5;
				border-radius: 10rpx;
				font-size: 24rpx;
				color: #aa93b1;
				padding: 6rpx 12rpx;
				.img {
					margin-left: 4rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}

			.more {
				background-color: #f4f4f5;
				border-radius: 10rpx;
				font-size: 24rpx;
				color: #aa93b1;
				margin-left: 10rpx;
				padding: 6rpx 12rpx;
			}
		}
	}

	.content {
		position: absolute;
		margin-top: 20rpx;
		padding: 20rpx;
		border-radius: 4px;
		background-color: #fff;
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
		z-index: 999;
		max-height: 300rpx;
		overflow-y: auto;

		.item {
			padding: 10rpx;
			height: 60rpx;
			line-height: 40rpx;
			margin-bottom: 10rpx;
      color: rgb(100,100,100) !important;
		}

		.choose {
			background-color: #f5f7fa;
			color: #409eff;
			font-weight: 700;
		}
	}

	.animation-top {
		animation-name: slide-top;
		animation-duration: 0.5s;
		animation-timing-function: ease-out;
		animation-fill-mode: both;
	}

	@keyframes slide-top {
		0% {
			opacity: 0;
			transform: translateY(-20%);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
}
</style>
